/**
* 功能描述: 评论器demo
* @author 崔孝楠
* @date 2022/9/28 17:13
* @version 1.0
*/
<template>
  <div style="width: 800px">
    <div class="yw-base-list yw-list-split">
      <!-- 评论条数 -->
      <div class="yw-list-header">2 replies</div>
      <!-- 评论区 -->
      <ul class="yw-comment-container">
        <!-- 第一条评论 -->
        <li class="yw-comment-list-item">
          <div class="yw-comment">
            <!-- 头像 -->
            <div class="yw-comment-avatar">
              <img src="https://joeschmoe.io/api/v1/random" alt="comment-avatar">
            </div>
            <!-- 评论 -->
            <div class="yw-comment-content">
              <div class="yw-comment-content-author">
                <span class="yw-comment-content-author-name">Han Solo</span>
                <span class="yw-comment-content-author-time">几秒前</span>
              </div>
              <!-- 评论内容 -->
              <div class="yw-comment-content-detail">123654</div>
              <!-- 操作 -->
              <ul class="yw-comment-actions">
                <li><span>Reply to</span></li>
              </ul>
            </div>
          </div>
          <!-- 嵌套评论 -->
          <div class="yw-comment-list-item yw-comment-nested">
            <div class="yw-comment">
              <!-- 头像 -->
              <div class="yw-comment-avatar">
                <img src="https://joeschmoe.io/api/v1/random" alt="comment-avatar">
              </div>
              <!-- 评论 -->
              <div class="yw-comment-content">
                <div class="yw-comment-content-author">
                  <span class="yw-comment-content-author-name">Han Solo</span>
                  <span class="yw-comment-content-author-time">几秒前</span>
                </div>
                <!-- 评论内容 -->
                <div class="yw-comment-content-detail">123654</div>
                <!-- 操作 -->
                <ul class="yw-comment-actions">
                  <li><span>Reply to</span></li>
                </ul>
              </div>
            </div>
          </div>
        </li>
        <!-- 第二条评论 -->
        <li class="yw-comment-list-item">
          <div class="yw-comment">
            <!-- 头像 -->
            <div class="yw-comment-avatar">
              <img src="https://joeschmoe.io/api/v1/random" alt="comment-avatar">
            </div>
            <!-- 评论 -->
            <div class="yw-comment-content">
              <div class="yw-comment-content-author">
                <span class="yw-comment-content-author-name">Han Solo</span>
                <span class="yw-comment-content-author-time">几秒前</span>
              </div>
              <!-- 评论内容 -->
              <div class="yw-comment-content-detail">123654</div>
              <!-- 操作 -->
              <ul class="yw-comment-actions">
                <li><span>Reply to</span></li>
              </ul>
            </div>

          </div>
        </li>
      </ul>

    </div>
    <!-- 添加评论 -->
    <div class="yw-comment">
      <!-- 头像 -->
      <div class="yw-comment-avatar">
        <span class="yw-avatar yw-avatar-circle yw-avatar-image">
          <img src="https://joeschmoe.io/api/v1/random" alt="Han Solo">
        </span>
      </div>
      <!-- 添加评论 -->
      <div class="yw-comment-content">
        <!-- 输入框 -->
        <div class="yw-input-content">
          <textarea rows="4" class="yw-textarea"></textarea>
        </div>
        <!-- 按钮 -->
        <div class="yw-input-content">
          <button class="yw-btn yw-btn-primary" type="submit">
            <span>Add Comment</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "index"
}
</script>

<style scoped>

</style>
